<template>
  <div class="bigbox">
    <!-- 页面导航搜索盒子 -->
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="100px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="园区/建筑群">
                  <FilterSelect2
                      v-model="buildingSetIds"
                      :optionlist="qiyelist"
                      @updateModelValue="changeqiye"
                      :valuekey="{ name: 'name', value: 'id' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="19" style="text-align: right;">
                <el-form-item label="">
                  <el-button type="primary" size="small" @click="getlist()">查询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <!-- 页面主题盒子 -->
    <div class="bodybox">
      <div class="zhuti">
        <div class="little newzhen">
       <span @click="dialogVisible=true" style="cursor: pointer;"><i class="el-icon-plus"></i></span>
      </div>
      <div class="little xinxi" v-for="(item,index) in numberlist" :key="index">
        <div class="nei">
          <div class="gongs" style="overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;">{{ item.name }}</div>
          <div>
            <img :src="'data:image/png;base64,' + item.pictureFile" alt="">
          </div>
          <div class="fang" >联系人：{{ array[index][0].CONTACTSNAME }}</div>
          <div class="fang">联系方式：{{ array[index][0].CONTACTSPHONE }}</div>
          <div class="icon">
            <i @click="looklook(item)" class="el-icon-view" style="color: #1890FF;cursor: pointer;"></i>
            <i @click="bianji(item)" class="el-icon-edit" style="color: #1890FF;cursor: pointer;"></i>
            <i @click="deljianzhuqun(item)" class="el-icon-delete" style="color: red;cursor: pointer;"></i>
          </div>
        </div>
      </div>
      </div>
      <!-- 底部分页 -->
      <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="9"
                @current-change="getlist"
                :total="+totalCount">
          </el-pagination>
        </div>
      <!-- 弹窗新增 -->
      <div class="dialog">
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          :close-on-click-modal="false"
          width="50%">
          <div>
            <div>
              <el-steps :active="active" finish-status="success" >
                <el-step title="账号信息" ></el-step>
                <el-step title="业务范围"></el-step>
                <el-step title="建筑群信息"></el-step>
                <el-step title="地理定位"></el-step>
              </el-steps>
              <el-divider class="fengex"></el-divider>
            </div>
            <!-- 第一步账号信息 -->
            <div v-if="active==0">
              <el-form :model="formone" :rules="rulesone" label-position="right" label-width="100px" ref="formone">
               <el-row>
                <el-col :span="24">
                  <el-form-item label="建筑群"  prop="name">
                    <el-input v-model="formone.name" size="small" placeholder="请输入建筑群"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-row>
                <el-col :span="24">
                  <el-form-item label="收费单位" prop="companyName">
                    <el-input v-model="formone.companyName" size="small" placeholder="请输入收费单位">
                       <button type="button"  slot="suffix" style="width: 50px;color: #fff;border-radius: 3px;
                       height: 24px;background: #1890FF;border: none;" @click="yanzheng">验证</button>
                    </el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-row>
                <el-col :span="24">
                  <el-form-item label="企业识别码" prop="identityCode">
                    <el-input v-model="formone.identityCode" size="small" placeholder="请输入企业识别码"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-row>
                <el-col :span="24">
                  <el-form-item label="管理员姓名" prop="manageUserName">
                    <el-input v-model="formone.manageUserName" size="small" placeholder="请输入管理员姓名"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-row>
                <el-col :span="24">
                  <el-form-item label="管理员账号" prop="manageUserMobile">
                    <el-input v-model="formone.manageUserMobile" size="small" placeholder="请输入管理员账号"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
              </el-form>
              </div>
              <!-- 第二步业务范围 -->
              <div v-else-if="active==1">
                <div class="img">
                  <img
                    :src="'data:image/png;base64,' + userfanwei.imageBase64"
                    class="item-img"/>
                    <p>{{ userfanwei.name }} <i class="el-icon-check"></i></p>
                </div>
              </div>
              <!-- 第三步建筑群信息 -->
              <div v-else-if="active==2">
                <el-form :model="form" :rules="rules" label-position="right" label-width="100px" ref="form">
             <el-row>
              <el-col :span="12">
                <el-form-item label="企业名称" prop="companyName">
                  <el-input v-model="form.companyName" size="small" placeholder="请输入企业名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="税号" prop="enterpriseCode">
                  <el-input v-model="form.enterpriseCode" size="small" placeholder="请输入税号"></el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="行业类别" prop="industryCategory">
                  <el-select style="width: 100%;" v-model="form.industryCategory" size="small" placeholder="请选择行业类别" @change="changeleibie">
                    <el-option v-for="(item,index) in leibielist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行业分类" prop="industryType">
                  <el-select style="width: 100%;" v-model="form.industryType" size="small" placeholder="请选择行业分类" @change="changefenlei">
                    <el-option v-for="(item,index) in fenleilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="24">
                <el-form-item label="营业范围" prop="businessScopeDetail">
                  <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="form.businessScopeDetail">
                  </el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-divider class="fengex"></el-divider>
             <el-row>
              <el-col :span="12">
                <el-form-item label="省" prop="province">
                  <el-select style="width: 100%;" v-model="form.province" size="small" placeholder="请选择省" @change="changeprovince">
                    <el-option v-for="(item,index) in provinceArr" :label="item.text" :value="item.value" :key="index" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="市" prop="city">
                  <el-select style="width: 100%;" v-model="form.city" size="small" placeholder="请选择收费类型" @change="changecity">
                    <el-option v-for="(item,index) in citylist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="区" prop="county">
                  <el-select style="width: 100%;" v-model="form.county" size="small" placeholder="请选择收费类型" @change="changecounty">
                    <el-option v-for="(item,index) in countyarr" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="用电地址" prop="address">
                  <el-input v-model="form.address" size="small" placeholder="请输入用电地址"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户日期" prop="createDate">
                  <el-input v-model="form.createDate" size="small" placeholder="请输入开户日期"></el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-divider class="fengex"></el-divider>
             <el-row>
              <el-col :span="12">
                <el-form-item label="充值途径" prop="rechargeChannels">
                  <el-select style="width: 100%;" multiple  v-model="form.rechargeChannels" size="small" placeholder="请选择充值途径">
                    <el-option v-for="(item,index) in chongzhilist" :label="item.text" :value="item.value" class="option" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="图片" prop="name">
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :http-request="httpRequest">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisibles"  append-to-body>
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </el-col>
             </el-row>
             <el-divider class="fengex"></el-divider>
             <el-row>
              <el-col>
                <el-form-item label="联系人">
                    <i @click="addcontact" class="iconfont icon-tianjiawenjian" style="color: #1890FF;font-size: 20px;cursor:pointer ;"></i>
                </el-form-item>
              </el-col>
             </el-row>
             <template>
              <div style="border: 1px solid #ccc;margin-bottom: 10px;padding: 10px 0;" v-for="(item,index) in Contact" :key="index">
                <el-row >
                  <el-col :span="12">
                    <el-form-item :label="'联系人'+(index+1)" prop="name">
                      <el-input v-model="Contact[index].CONTACTSNAME" size="small" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="'联系电话'+(index+1)" prop="name">
                      <el-input style="width: 90%;" v-model="Contact[index].CONTACTSPHONE" size="small" placeholder="请输入联系电话"></el-input>
                      <span @click="removeContact(index)">
                        <i class="iconfont icon-jian1" style="font-size: 20px;color: red;margin-left: 3px;"></i>
                      </span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="'消息接收'+(index+1)">
                      <el-radio-group v-model="Contact[index].SMSNOTCIE">
                        <el-radio label="T">是</el-radio>
                        <el-radio label="F">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
             </template>
             <el-divider class="fengex"></el-divider>
                <el-row>
                  <el-col>
                    <el-form-item label="收费类型">
                        <i @click="addcontacttype" class="iconfont icon-tianjiawenjian" style="color: #1890FF;font-size: 20px;cursor:pointer ;"></i>
                    </el-form-item>
                  </el-col>
                </el-row>
                <template>
                    <div style="border: 1px solid #ccc;margin-bottom: 10px;padding: 10px 0;" v-for="(item,index) in Contacttype" :key="index+1">
                      <el-row>
                        <el-col :span="24">
                           <el-form-item :label="'能源类型'+(index+1)">
                            <el-radio-group v-model="Contacttype[index].ENERGYTYPE">
                                <el-radio v-for="(item,index) in nengyuanlist" :key="index" :label="item.value">{{ item.text }}</el-radio>
                              </el-radio-group>
                           </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row >
                        <el-col :span="12">
                          <el-form-item :label="'收费类型'+(index+1)" prop="name">
                            <el-select v-model="Contacttype[index].FEETYPE" size="small" placeholder="请输入收费类型" style="width: 100%;">
                              <el-option v-for="(item,index) in shoufeilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item :label="'控制方式'+(index+1)" prop="name">
                            <el-select style="width: 90%;" v-model="Contacttype[index].FEECONTROL" size="small" placeholder="请输入控制方式">
                              <el-option v-for="(item,index) in kongzhilist" :label="item.text" :key="index" class="option" :value="item.value"></el-option>
                            </el-select>
                            <span @click="removeContacttype(index)">
                              <i class="iconfont icon-jian1" style="font-size: 20px;color: red;margin-left: 3px;"></i>
                            </span>
                          </el-form-item>
                        </el-col>
                      </el-row>
                    </div>
                </template>
               </el-form>
              </div>
              <!-- 第四步地理信息 -->
              <div v-else-if="active==3">
                <el-form :model="formfour" :rules="rulesfour" label-position="right" label-width="100px" ref="formfours">
                <el-row>
                  <el-col :span="24">
                     <el-form-item label="地理定位">
                      <el-select
                        v-model="keywords"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入关键词"
                        :remote-method="remoteMethod"
                        size="small"
                        style="width: 100%;"
                        @change="currentSelect">
                        <el-option
                        style="padding-left: 10px;"
                          v-for="item in options"
                          :key="item.id"
                          :label="item.name"
                          :value="item"
                          class="one-text">
                        </el-option>
                      </el-select>
                     </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                     <el-form-item label="经度" prop="longitude">
                      <el-input v-model="formfour.longitude" size="small" ></el-input>
                     </el-form-item>
                  </el-col>
                  <el-col :span="12">
                     <el-form-item label="纬度" prop="latitude">
                      <el-input v-model="formfour.latitude" size="small" ></el-input>
                     </el-form-item>
                  </el-col>
                </el-row>
                <template>
                  <div style="height: 400px;">
                    <GaodeMap :address="keywords" @getoptions="getoptions" :location=location ref="gaodemap" @setlocation="setlocation"></GaodeMap>
                  </div>
                </template>
              </el-form>
              </div>
          </div>
          <span slot="footer" >
            <button v-if="active==0" class="dialognext" type="primary" @click="next">下一步</button>
            <button v-else-if="active==1" class="dialognext" type="primary" @click="nextfanwei">下一步</button>
            <button v-else-if="active==2" class="dialognext" type="primary" @click="nextxinxi">下一步</button>
            <button v-else class="dialognext" type="primary" @click="nextbaocun">保存</button>
          </span>
        </el-dialog>
      </div>
      <!-- 浏览弹窗 -->
      <div class="dialog">
        <!-- <LookBuild ref="LookBuild"></LookBuild> -->
        <el-dialog
      title="浏览建筑群"
      :visible.sync="lookdialogVisible"
      width="50%">
      <div>
        <el-form :model="lookform"  label-position="right" label-width="100px" ref="formone" >
          <el-row>
                <el-col :span="12">
                  <el-form-item label="建筑群"  prop="name">
                    <el-input :disabled="!isbianji" v-model="lookform.name" size="small" placeholder="请输入建筑群"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="收费单位" prop="companyName" >
                    <el-input v-model="lookform.companyName" size="small" :disabled="isbianji" placeholder="请输入收费单位"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-row>
                <el-col :span="12">
                  <el-form-item label="企业识别码" prop="identityCode">
                    <el-input v-model="lookform.identityCode" size="small" :disabled="isbianji" placeholder="请输入企业识别码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="管理员姓名" prop="manageUserName">
                    <el-input v-model="lookform.manageUserName" size="small" :disabled="isbianji" placeholder="请输入管理员姓名"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-row>
                <el-col :span="12">
                  <el-form-item label="管理员账号" prop="manageUserMobile">
                    <el-input v-model="lookform.manageUserMobile" size="small" :disabled="isbianji" placeholder="请输入管理员账号"></el-input>
                  </el-form-item>
                </el-col>
               </el-row>
               <el-divider></el-divider>
               <div class="img" style="margin: 10px 0;">
                  <img
                    :src="'data:image/png;base64,' + userfanwei.imageBase64"
                    class="item-img"/>
                    <p>{{ userfanwei.name }} <i class="el-icon-check"></i></p>
                </div>
                <el-row>
              <el-col :span="12">
                <el-form-item label="企业名称" prop="companyName">
                  <el-input v-model="lookform.companyName" size="small" :disabled="isbianji" placeholder="请输入企业名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="税号" prop="enterpriseCode">
                  <el-input v-model="lookform.identityCode" size="small" :disabled="isbianji" placeholder="请输入税号"></el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="行业类别" prop="industryCategory">
                  <el-select style="width: 100%;" v-model="lookform.industryCategory" :disabled="isbianji" size="small" placeholder="请选择行业类别" @change="changeleibie">
                    <el-option v-for="(item,index) in leibielist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行业分类" prop="industryType">
                  <el-select style="width: 100%;" v-model="lookform.industryType" :disabled="isbianji" size="small" placeholder="请选择行业分类" @change="changefenlei">
                    <el-option v-for="(item,index) in fenleilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="24">
                <el-form-item label="营业范围" prop="businessScopeDetail">
                  <el-input
                    type="textarea"
                    :disabled="isbianji"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="lookform.businessScopeDetail">
                  </el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-divider class="fengex"></el-divider>
             <el-row>
              <el-col :span="12">
                <el-form-item label="省" prop="province">
                  <el-select style="width: 100%;" :disabled="!isbianji" v-model="lookform.province" size="small" placeholder="请选择省" @change="changeprovince">
                    <el-option v-for="(item,index) in provinceArr" :label="item.text" :value="item.value" :key="index" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="市" prop="city">
                  <el-select style="width: 100%;" :disabled="!isbianji" v-model="lookform.city" size="small" placeholder="请选择收费类型" @change="changecity">
                    <el-option v-for="(item,index) in citylist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="区" prop="county">
                  <el-select style="width: 100%;" :disabled="!isbianji" v-model="lookform.county" size="small" placeholder="请选择收费类型" @change="changecounty">
                    <el-option v-for="(item,index) in countyarr" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="用电地址" >
                  <el-input v-model="lookform.elcAddress" :disabled="isbianji" size="small" placeholder="请输入用电地址"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户日期" prop="createDate">
                  <el-input v-model="lookform.createDate" size="small" :disabled="isbianji" placeholder="请输入开户日期"></el-input>
                </el-form-item>
              </el-col>
             </el-row>
             <el-divider class="fengex"></el-divider>
             <el-row>
              <el-col :span="12">
                <el-form-item label="充值途径" prop="rechargeChannels">
                  <el-select style="width: 100%;" multiple v-model="lookform.rechargeChannels" :disabled="!isbianji" size="small" placeholder="请选择充值途径">
                    <el-option v-for="(item,index) in chongzhilist" :label="item.text" :value="item.value" class="option" :key="index"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
             </el-row>
             <el-row>
              <el-col :span="12">
                <el-form-item label="图片" prop="name">
                    <img  :src="'data:image/png;base64,' +lookform.pictureFile" class="avatar">
                </el-form-item>
              </el-col>
             </el-row>
             <el-divider class="fengex"></el-divider>
             <el-row>
              <el-col>
                <el-form-item label="联系人">
                    <!-- <i @click="addcontact" class="iconfont icon-tianjiawenjian" style="color: #1890FF;font-size: 20px;cursor:pointer ;"></i> -->
                </el-form-item>
              </el-col>
             </el-row>
             <template>
              <div style="border: 1px solid #ccc;margin-bottom: 10px;padding: 10px 0;" v-for="(item,index) in Contact" :key="index">
                <el-row >
                  <el-col :span="12">
                    <el-form-item :label="'联系人'+(index+1)" prop="name">
                      <el-input v-model="Contact[index].CONTACTSNAME" size="small" :disabled="!isbianji" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="'联系电话'+(index+1)" prop="name">
                      <el-input style="width: 90%;" v-model="Contact[index].CONTACTSPHONE" :disabled="!isbianji" size="small" placeholder="请输入联系电话"></el-input>
                      <!-- <span @click="removeContact(index)" :disabled="true">
                        <i class="iconfont icon-jian1" style="font-size: 20px;color: red;margin-left: 3px;"></i>
                      </span> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item :label="'消息接收'+(index+1)">
                      <el-radio-group v-model="Contact[index].SMSNOTCIE" :disabled="!isbianji">
                        <el-radio label="T">是</el-radio>
                        <el-radio label="F">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
             </template>
             <el-divider class="fengex"></el-divider>
                <el-row>
                  <el-col>
                    <el-form-item label="收费类型">
                        <!-- <i @click="addcontacttype" class="iconfont icon-tianjiawenjian" style="color: #1890FF;font-size: 20px;cursor:pointer ;"></i> -->
                    </el-form-item>
                  </el-col>
                </el-row>
                <template>
                    <div style="border: 1px solid #ccc;margin-bottom: 10px;padding: 10px 0;" v-for="(item,index) in Contacttype" :key="index+44">
                      <el-row>
                        <el-col :span="24">
                           <el-form-item :label="'能源类型'+(index+1)">
                            <el-radio-group v-model="Contacttype[index].ENERGYTYPE" :disabled="!isbianji">
                                <el-radio v-for="(item,index) in nengyuanlist" :key="index" :label="item.value">{{ item.text }}</el-radio>
                              </el-radio-group>
                           </el-form-item>
                        </el-col>
                      </el-row>
                      <el-row >
                        <el-col :span="12">
                          <el-form-item :label="'收费类型'+(index+1)" prop="name" :disabled="!isbianji">
                            <el-select v-model="Contacttype[index].FEETYPE" size="small" placeholder="请输入收费类型" style="width: 100%;">
                              <el-option v-for="(item,index) in shoufeilist" :key="index" :label="item.text" :value="item.value" class="option"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item :label="'控制方式'+(index+1)" prop="name" :disabled="!isbianji">
                            <el-select style="width: 90%;" v-model="Contacttype[index].FEECONTROL" size="small" placeholder="请输入控制方式">
                              <el-option v-for="(item,index) in kongzhilist" :label="item.text" :key="index" class="option" :value="item.value"></el-option>
                            </el-select>
                            <!-- <span @click="removeContacttype(index)">
                              <i class="iconfont icon-jian1" style="font-size: 20px;color: red;margin-left: 3px;"></i>
                            </span> -->
                          </el-form-item>
                        </el-col>
                      </el-row>

                    </div>
                </template>
                <el-divider></el-divider>
                      <el-row>
                        <el-col :span="24">
                          <el-form-item label="地理定位">
                            <el-input v-model="lookform.address" size="small" :disabled="!isbianji"></el-input>
                          </el-form-item>
                        </el-col>
                      </el-row>
                  <el-row>
                  <el-col :span="12">
                     <el-form-item label="经度" prop="longitude">
                      <el-input v-model="lookform.longitude" size="small" :disabled="!isbianji"></el-input>
                     </el-form-item>
                  </el-col>
                  <el-col :span="12">
                     <el-form-item label="纬度" prop="latitude">
                      <el-input v-model="lookform.latitude" size="small" :disabled="!isbianji"></el-input>
                     </el-form-item>
                  </el-col>
                </el-row>
                <template>
                  <div style="height: 400px;">
                    <GaodeMap :address="keywords" @getoptions="getoptions" :location=location ref="gaodemap" @setlocation="setlocation"></GaodeMap>
                  </div>
                </template>
        </el-form>
      </div>
      <span  slot="footer">
        <button style="width: 60px;
        height: 30px;border-radius: 3px;border: 1px solid #ccc;" class="button" @click="lookquxiao">取 消</button>
        <button style="width: 60px; background-color: #1a90fe;color:#fff;margin-left: 10px;
        height: 30px;border-radius: 3px;border:none;" class="button" @click="surebianji" v-if="isbianji">确 定</button>
      </span>
    </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import GaodeMap from './GaodeMap.vue'
import request from '@/utils/request'
import LookBuild from './LookBuild'
import {
  getloginlistapi, getyanzhengapi, postweihuoneapi, getlistapi, postweihutwoapi,getjianzhuqunapi,updatejianzuapi
,postweihuthreeapi,postweihufourapi,postdeljianzhuqunapi} from '@/api/prwpaid/file-management/Architectural-complex'
import { getshengshiquApi ,getBusinessFileApi,getBusinessApi} from '@/api/customerFile';
import { getEnterpriseData } from '@/api/companyRegister'
import {getzidianxialaapi} from '@/api/guidelines'
export default {
  name: 'CallPoliceIndex',
  components: {
    GaodeMap,
    LookBuild
  },
  data() {
    return {active:3,
      countyarr:[],
      citylist:[],
      provinceArr:[],
      numberlist:[],
      buildingSetIds:'',
      dialogImageUrl: '',
      dialogVisibles: false,
      dialogVisible:false,
      qiyelist: [],
      chongzhilist: [],
      nengyuanlist: [],
      shoufeilist: [],
      kongzhilist: [],
      leibielist: [],
      fenleilist:[],
      form: {areaName:'',provinceName:'',city:'',industryCategoryName:'',industryTypeName:''},
      rules: {
        rechargeChannels: [
        { required: true, message: '请选择充值途径', trigger: 'blur' },
        ],
        companyName: [
        { required: true, message: '请输入企业名称', trigger: 'blur' },
        ],
        enterpriseCode: [
        { required: true, message: '请输入税号', trigger: 'blur' },
        ],
        industryCategory: [
        { required: true, message: '请选择行业类别', trigger: 'blur' },
        ],
        industryType: [
        { required: true, message: '请选择行业分类', trigger: 'blur' },
        ],
        businessScopeDetail: [
        { required: true, message: '请输入营业范围', trigger: 'blur' },
        ],
        province: [
        { required: true, message: '请选择省', trigger: 'blur' },
        ],
        city: [
        { required: true, message: '请选择市', trigger: 'blur' },
        ],
        county: [
        { required: true, message: '请选择区/县', trigger: 'blur' },
        ],
        address: [
        { required: true, message: '请输入用电地址', trigger: 'blur' },
        ],
        createDate: [
        { required: true, message: '请输入开户日期', trigger: 'blur' },
        ],
      },
      Contact: [
        {CONTACTSNAME:'',CONTACTSPHONE:'',SMSNOTCIE:'F'}
      ],
      Contacttype: [
        {FEECONTROL:'',FEETYPE:'',ENERGYTYPE:''}
      ],
      pageobj: {
        pageNo: 0,
        pageSize:9
      },
      userinfo:{},
      options: [],
      keywords: '',
      location: {},
      formone: {},
      rulesone: {
        name: [
        { required: true, message: '请输入建筑群名称', trigger: 'blur' },
        ],
        companyName: [
        { required: true, message: '请输入收费单位', trigger: 'blur' },
        ],
        identityCode: [
        { required: true, message: '请输入企业识别码', trigger: 'blur' },
        ],
        manageUserName: [
        { required: true, message: '请输入管理员姓名', trigger: 'blur' },
        ],
        manageUserMobile: [
          { required: true, message: '请输入管理员账号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
      },
      formfour: {},
      rulesfour: {
        latitude: [
        { required: true, message: '请输入纬度', trigger: 'blur' },
        ],
        longitude:[
        { required: true, message: '请输入经度', trigger: 'blur' },
        ],
      },
      flagyan: false,
      imageUrl: '',
      uploadFile: '',
      userfanwei: {},
      totalCount: '',
      entity: '',
      id: '',
      file: '',
      array: [],
      lookdialogVisible: false,
      lookform:{},
      isbianji:false
    };
  },

  async mounted() {
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(item => item.id == localbuildingId);
    if(isBuildIdInArray){
      this.buildingSetIds=localbuildingId?localbuildingId:''
    }else{
      this.buildingSetIds=''
    }

    // this.buildingSetIds = res.data.list[0].id
    this.getlist()

    // el-upload--picture-card
  },

  methods: {
    // 企业下拉
    changeqiye(val) {
      localStorage.setItem('buildingId', val)
    },
    // 删除建筑群
    async deljianzhuqun(item){
     this.$confirm('此操作将永久删除该建筑群, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await postdeljianzhuqunapi({id: item.id}).then(res=>{
            this.$message({
              type:res.code=='200'?'success':'warning',
              message:res.message
            })
          })
          this.getlist()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取列表数据
    async getlist() {
      const res = await getlistapi({
        buildingsId: this.buildingSetIds,
        pageNo: this.pageobj.pageNo-1,
        pageSize:this.pageobj.pageSize
      })
      this.totalCount=res.data.totalCount
      this.numberlist = res.data.list
      this.array = res.data.list.map(ele => {
        return JSON.parse(ele.contactsInfos)
      })
    },
    // 确认编辑
    surebianji() {
      const { address, city, county, id, latitude, longitude, name, province } = this.lookform
      const rechargeChannels = this.lookform.rechargeChannels.join(',')
      const contactsInfos= JSON.stringify(this.Contact)
      const rechargeInfos= JSON.stringify(this.Contacttype)
      updatejianzuapi({
        address, city, county, id, latitude, longitude, name, province, rechargeChannels,
        contactsInfos,rechargeInfos,memos:'暂无'
      }).then(res => {
        this.$message({
           type: res.code == '200' ? 'success' : 'warning',
           message: res.code == '200' ? '修改成功':res.message
        })
        if(res.code=='200') this.getlist()
      })
      this.lookdialogVisible = false
    },
    // 编辑
    bianji(item) {
      this.isbianji = true
      this.looklook(item)
    },
    // 浏览
    async looklook(value) {
      this.lookdialogVisible = true
      this.getarrjiekoul()
      const {data:{entity}} = await getjianzhuqunapi({ buildingsId: value.id })
      this.lookform = { ...entity }
      this.lookform.rechargeChannels=entity.rechargeChannels.split(',')
      const zongfan = await getBusinessFileApi()
        const dangfan = await getBusinessApi()
        for (let i = 0; i < dangfan.data.list.length; i++) {
          if (dangfan.data.list[i].bizCode == 'bmb-admin') {
           this.userfanwei=zongfan.data.list.filter(ele=>ele.code=='bmb-admin')[0]
          }
      }

      this.Contact=JSON.parse(entity.contactsInfos)
      this.Contacttype=JSON.parse(entity.rechargeInfos)

      if(!entity.longitude&&!entity.latitude) return
      this.location.lng = entity.longitude
      this.location.lat = entity.latitude
      setTimeout(() => {
        this.$refs.gaodemap.removeMarker()
        this.$refs.gaodemap.setMapMarker()
      },200)
    },
    lookquxiao() {
      this.lookform = {}
      this.location={}
      this.Contact=[{CONTACTSNAME:'',CONTACTSPHONE:'',SMSNOTCIE:'F'}]
      this.Contacttype=[{FEECONTROL:'',FEETYPE:'',ENERGYTYPE:''}]
      this.lookdialogVisible = false
    },
    // 验证
    async yanzheng() {
      if(!this.formone.companyName) return this.$message.warning('请先输入收费单位')
      const res = await getyanzhengapi({ companyName:this.formone.companyName})
      if (res.code !== 200) {
        const ress = await getEnterpriseData(this.formone.companyName)
        if (ress.data.code==200) {
          this.userinfo = ress.data.data.data
          this.$set(this.formone, 'identityCode', this.userinfo.creditNo)
          this.$set(this.form, 'enterpriseCode', this.userinfo.creditNo)
          this.$set(this.form, 'address', this.userinfo.companyAddress)
          this.$set(this.form, 'createDate', this.userinfo.establishDate)
          this.$set(this.form, 'companyName', this.userinfo.companyName)
          this.$set(this.form, 'businessScopeDetail', this.userinfo.businessScope)
          this.flagyan = true
          this.$message.success('验证成功')
        } else {
          this.$message.warning('查询无结果')
        }
      } else {
        this.userinfo = res.data.entity
        this.$set(this.formone, 'identityCode', this.userinfo.enterpriseCode)
        this.$set(this.form, 'enterpriseCode', this.userinfo.enterpriseCode)
          this.$set(this.form, 'address', this.userinfo.address)
          this.$set(this.form, 'createDate', this.userinfo.createDate)
          this.$set(this.form, 'companyName', this.userinfo.companyName)
          this.$set(this.form, 'businessScopeDetail', this.userinfo.businessScopeDetail)
          this.$set(this.form, 'industryCategory', this.userinfo.industryCategory)
          this.$set(this.form, 'industryType', this.userinfo.industryType)
          this.flagyan=true
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
            message:res.data.content
          })
      }
    },
    // 图片文件上传
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
      // 查看图片详情
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisibles= true;
    },
    // 删除联系人
    removeContact(index) {
      if(this.Contact.length==1) return this.$message.warning('最后一项不可删除')
      this.Contact.splice(index,1)
    },
    // 添加联系人
    addcontact() {
      this.Contact.push({CONTACTSNAME:'',CONTACTSPHONE:'',SMSNOTCIE:'F'})
    },
    // 删除收费类型
    removeContacttype(index) {
      if(this.Contacttype.length==1) return this.$message.warning('最后一项不可删除')
      this.Contacttype.splice(index,1)
    },
    // 添加收费类型
    addcontacttype() {
      this.Contacttype.push({FEECONTROL:'',FEETYPE:'',ENERGYTYPE:''})
    },
    // 账号信息
    async next() {
        await this.$refs.formone.validate()
        if (!this.flagyan) return this.$message.warning('请先输入收费单位进行验证')
        const res = await postweihuoneapi({ ...this.formone, isParams: true, companyDossierInfoId: this.userinfo.id?this.userinfo.id:'' })
        if (res.code == '200') {
        this.entity=res.data.entity
        const zongfan = await getBusinessFileApi()
        const dangfan = await getBusinessApi()
        for (let i = 0; i < dangfan.data.list.length; i++) {
          if (dangfan.data.list[i].bizCode == 'bmb-admin') {
            this.userfanwei = zongfan.data.list.filter(ele => ele.code == 'bmb-admin')[0]
           }
          }
          this.$refs.formone.resetFields()
        if (this.active++ > 3) this.active = 0;
      }
    },
    // 业务范围
    async nextfanwei() {
      const res= await postweihutwoapi({businessScope:this.userfanwei.code,companyDossierInfoId:this.entity, isParams: true})
      if (this.active++ > 3) this.active = 0;
      // this.form=this.userinfo province city district /area区 /county绑定区
      if (!this.userinfo.province) {
        this.form.city=''
        this.form.county=''
        return this.form.province=''
      }
      this.userinfo.provinceName ?
      this.form.province =  this.userinfo.province :
      this.form.province = this.provinceArr.filter(ele => ele.text == this.userinfo.province)[0].value
      await this.changeprovince(this.form.province)
      this.form.city = this.citylist.filter(ele => ele.text == this.userinfo.city)[0].value
      await this.changecity(this.form.city)
      this.form.county = this.countyarr.filter(ele =>ele.text==this.userinfo.area?this.userinfo.area:this.userinfo.district)[0].value
    },
        // 第三步建筑群信息
    async nextxinxi() {
      await this.$refs.form.validate()
      const {rechargeChannels,...forms}=this.form
      const obj = {
        name: this.formone.name,
        companyDossierInfoId:this.entity,
        memos:'暂无',
        ...forms,
        rechargeChannels:rechargeChannels.join(','),
          contactsInfos: this.Contact,
          rechargeInfos: this.Contacttype,
      }
      const object = JSON.stringify(obj);
      var formData = new FormData();
      formData.append('uploadFile', this.file);
      formData.append('jsonData', object)
      const res= await request.post('/mbm-microservice-biz/mbm/archives/buildingSet/save/thirdStep',  formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
      })
      if (res.code!==200) return this.$message.error(`${res.message}`)
      this.id = res.data.entity
      this.$refs.form.resetFields()
      if (this.active++ > 3) this.active = 0;
    },
    // 第四部保存
    async nextbaocun() {
      // await this.$refs.formfours.validate()
      const res = await postweihufourapi({
        isParams: true,
        ...this.formfour,
        id: this.id,
        companyDossierInfoId:this.entity
      })
      // this.$refs.formfours.resetFields()
      this.formfour = {}
      this.form={}
      this.$message.success('保存成功')
      this.getlist()
      this.dialogVisible = false
      this.active=0
    },

    // 省份选择
    async changeprovince(val) {
      const res = await getshengshiquApi(val)
      this.citylist = res.data.list
      this.changecity(this.citylist[0].value)
      this.form.city = res.data.list[0].value
      this.form.provinceName=this.provinceArr.filter(ele=>ele.value==val)[0].text
    },
    // 城市选择
    async changecity(val) {
      const res = await getshengshiquApi(val)
      this.countyarr = res.data.list
      this.form.county= res.data.list[0].value
      this.form.cityName = this.citylist.filter(ele => ele.value == val)[0].text
      this.changecounty(this.countyarr[0].value)
    },
    // 区县选择
    changecounty(val) {
      this.$forceUpdate()
      this.form.areaName= this.countyarr.filter(ele=>ele.value==val)[0].text
    },
    // 行业类别选择
    changeleibie(val) {
      this.form.industryCategoryName=this.leibielist.filter(ele=>ele.value==val)[0].text
    },
    // 行业分类选择
    changefenlei(val) {
      this.form.industryTypeName=this.fenleilist.filter(ele=>ele.value==val)[0].text
    },
    // 获取地图输入建议列表
    getoptions(val) {
      this.options=val
    },
    remoteMethod(val) {
      this.keywords=val
    },
    // 选中地图输入建议数据
    currentSelect(val) {
      this.location = val.location
      console.log(this.location);
      this.formfour.longitude = val.location.lng
      this.formfour.latitude = val.location.lat
      setTimeout(() => {
        this.$refs.gaodemap.removeMarker()
        this.$refs.gaodemap.setMapMarker()
      },200)
    },
    // 地址解析，点击地图生成坐标点
    setlocation(val) {
      const arr=[val.lnglat.lng,val.lnglat.lat]
      axios.get(
          `https://restapi.amap.com/v3/geocode/regeo?location=${arr}&key=d16b59895ea80ae1dc95fcf2165996ad`
      ).then(ele => {
        this.keywords=ele.data.regeocode.formatted_address
        })
      this.location.lng = val.lnglat.lng
      this.location.lat = val.lnglat.lat
      this.formfour.longitude = val.lnglat.lng
      this.formfour.latitude = val.lnglat.lat
    },
    // 文件上传
    httpRequest(data) {
      this.imageUrl = URL.createObjectURL(data.file)
      this.file = data.file
        this.getBase64(data.file).then((resBase64) => {
          this.uploadFile = resBase64.split(',')[1]  // 直接拿到base64信息
        })
      // }
    },
   // 这个file参数 也就是文件信息，可以打印出文件信息
   getBase64 (file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader()
        let fileResult = ''
        reader.readAsDataURL(file)
        // 开始转
        reader.onload = function () {
          fileResult = reader.result
        }
        // 转 失败
        reader.onerror = function (error) {
          reject(error)
        }
        // 转 结束  就 resolve 出去
        reader.onloadend = function () {
          resolve(fileResult)
        }
      })
    },
    // 删除图片
    handleRemove(file, fileList) {
      // this.getBase64(file.raw).then((resBase64) => {
      //   const base=resBase64.split(",")[1];
      //   this.uploadFile = this.uploadFile.filter(ele => {
      //     return ele !== base
      //   })
      // })
      this.uploadFile = ''
    },
    async getarrjiekoul() {
       // 获取省
      const res = await getshengshiquApi('')
          this.provinceArr = res.data.list
        this.changeprovince(this.provinceArr[0].value)
        this.form.province = res.data.list[0].value
        // 获取充值途径
        const chong = await getzidianxialaapi({ dictType: 'MBM_RECHARGE_CHANNEL' })
        this.chongzhilist = chong.data.list
        // 获取能源类型
        const nengyuan = await getzidianxialaapi({ dictType: 'MBM_ENERGY_TYPE' })
        this.nengyuanlist = nengyuan.data.list
        // 获取收费类型
        const shoufei = await getzidianxialaapi({ dictType: 'MBM_FEE_TYPE' })
        this.shoufeilist = shoufei.data.list
        // 获取控制方式
        const kongzhi = await getzidianxialaapi({ dictType: 'MBM_FEE_CONTROL' })
        this.kongzhilist = kongzhi.data.list
        // 获取行业类别
        const leibie = await getzidianxialaapi({ dictType: 'GWYXDM_HYLB' })
        this.leibielist = leibie.data.list
        // 获取行业分类
        const fenlei = await getzidianxialaapi({ dictType: 'GWYXDM_HYFL' })
        this.fenleilist = fenlei.data.list
    },
  },
  watch: {
    lookdialogVisible(row) {
      if (!row) {
        this.isbianji=false
      }
    },
    async dialogVisible(val) {
      if (val) {
        // 获取省
        const res = await getshengshiquApi('')
        this.provinceArr = res.data.list
        this.changeprovince(this.provinceArr[0].value)
        this.form.province = res.data.list[0].value
        // 获取充值途径
        const chong = await getzidianxialaapi({ dictType: 'MBM_RECHARGE_CHANNEL' })
        this.chongzhilist = chong.data.list
        // 获取能源类型
        const nengyuan = await getzidianxialaapi({ dictType: 'MBM_ENERGY_TYPE' })
        this.nengyuanlist = nengyuan.data.list
        // 获取收费类型
        const shoufei = await getzidianxialaapi({ dictType: 'MBM_FEE_TYPE' })
        this.shoufeilist = shoufei.data.list
        // 获取控制方式
        const kongzhi = await getzidianxialaapi({ dictType: 'MBM_FEE_CONTROL' })
        this.kongzhilist = kongzhi.data.list
        // 获取行业类别
        const leibie = await getzidianxialaapi({ dictType: 'GWYXDM_HYLB' })
        this.leibielist = leibie.data.list
        // 获取行业分类
        const fenlei = await getzidianxialaapi({ dictType: 'GWYXDM_HYFL' })
        this.fenleilist = fenlei.data.list
      }
    },
  }
};
</script>

<style lang="scss" scoped>
.option{
  padding-left: 10px;
}
 .bigbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    .zhuti{
      height: 95%;
      display: flex;
    flex-wrap: wrap;
        overflow: hidden;
        overflow: auto;
    }
    .fenye{
      text-align: right;
    }
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;

    .newzhen{
      line-height: 331px;
      text-align: center;
      i{
        color: #1890FF;
        font-size: 100px;
      }
    }
    .little{
      // width: 292px;
      margin-right: 1%;
      width: 19%;
      height: 331px;
      border: 1px solid #1890FF;
      padding: 20px 0;
      margin-bottom: 10px;
      position: relative;
      .nei{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        img{
        width: 200px;
        height: 133px;
        margin-bottom: 10px;
      }

      .gongs{
       text-align: left;
       margin-bottom: 20px;
      }
      .fang{
      width: 100%;
        margin-bottom: 10px;
      }
      .icon{
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
        font-size: 20px;
      }
      }
    }
    .dialog{
      .img{
        width: 181px;
        height: 130px;
        border: 1px solid skyblue;
        img{
          width: 180px;
          height: 100px;
          vertical-align: middle;
        }
        p{
          text-align: center;
          .el-icon-check{
            color: #81b337;
            font-size: 20px;
          }
        }
      }
      .dialognext{
        width: 200px;height: 30px;
        background-color: #1a90fe;
        color: #fff;
        border: none;
        border-radius: 3px;
      }
      .span{
        border-radius: 3px;
        margin-bottom: 10px;
        padding: 6px;
        width: 100%;
        border: 1px solid #ccc;
        text-align: center;
        cursor: pointer;
      }
    }
  }
 }
// ::v-deep .el-upload-list__item{
//   width: 60px;
//   height: 60px;
// }
// ::v-deep .el-upload--picture-card{
//   width: 60px;
//   height: 60px;
//   line-height: 60px;
//   margin-bottom: 5px;
// }
 ::v-deep .avatar-uploader .el-upload {
    border: 1px solid skyblue;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 20px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
  .avatar {
    width: 60px;
    height: 60px;
    display: block;
  }
 .fengex{
  margin: 10px 0;
 }
 ::v-deep .el-radio{
  margin-right: 10px;
 }
 ::v-deep .el-dialog__footer{
  text-align: center;
 }
 ::v-deep .amap-logo {
  display: none!important;
  visibility: hidden!important;
}

::v-deep .amap-copyright {
  display: none!important;
  visibility: hidden!important;
}
::v-deep .el-form-item__error{
  padding-top: 0 !important;
}
::v-deep .el-row{
  margin-bottom: 7px;
}
</style>